<template>
  <div class="empty">
    <img :src="image" :style="styles" alt>
    <p>{{text}}</p>
    <p v-if="smallText">{{smallText}}</p>
  </div>
</template>

<script>
export default {
  props: ["image", "text", 'smallText', 'mWidth', 'mHeight'],
  data() {
    return {
      width: 15
    }
  },
  computed: {
    styles () {
      if (this.mWidth && this.mHeight) {
        return `width:${this.mWidth}vw; height: ${this.mHeight}vw`
      }
    }
  }
};
</script>

<style lang="less" scoped>
.empty {
  width: 100%;
  font-size: 4vw;
  text-align: center;
  min-height: 100vw;
  margin-top: 60vw;
  img {
      height: 15vw;
      margin-bottom: 2vw;
  }
  p:first-child {
      margin-bottom: 2vw;
      font-size: 4vw;
  }
  p:last-child {
      font-size: 3.5vw;
      color: #999;
  }
}
</style>